<template>
	<view>
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">扫码</block>
		</cu-custom>
		<view class="scan flex-center" @click="scanCode">
			<view>扫码</view>
			<view class="sectionview" v-if="scanshow == true" @click.stop="scanshowtab">
				<view class="qr-reader" id="qr-reader" style="width:100%;height:100%;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	import {
		Html5Qrcode
	} from 'html5-qrcode'
	// #endif
	export default {
		data() {
			return {
				cameraId: '',
				scanshow: false,
				scantext: '',
				html5QrCode: ''
			}
		},
		methods: {
			scanCode() {
				// #ifdef APP-PLUS
				const that = this
				uni.scanCode({
					success: function(res) {
						that.$emit('change', res.result)
					}
				});
				// #endif
				// #ifdef H5
				this.getCameras()
				// #endif
			},
			scanshowtab() {
				this.scanshow = false
				this.stop();
			},
			getCameras() {
				this.$nextTick(() => {
					if (this.scanshow) return
					this.scanshow = true
					Html5Qrcode.getCameras()
						.then(devices => {
							/**
							 * devices would be an array of objects of type:
							 * { id: "id", label: "label" }
							 */
							if (devices && devices.length) {
								if (devices.length > 1) {
									this.cameraId = devices[1].id;
								} else {
									this.cameraId = devices[0].id;
								}
								this.start();
							}

						})
						.catch(err => {
							uni.$showMsg(err)
							this.scanshow = false
						});
				})
			},
			stop() {
				this.scanshow = false
				this.html5QrCode
					.stop()
					.then(ignore => {
						// QR Code scanning is stopped.
						console.log('QR Code scanning stopped.');
					})
					.catch(err => {
						// Stop failed, handle it.
						console.log('Unable to stop scanning.');
					});
			},
			start() {
				this.html5QrCode = new Html5Qrcode('qr-reader');
				this.html5QrCode
					.start(
						this.cameraId, // retreived in the previous step.
						{
							fps: 10, // sets the framerate to 10 frame per second
							qrbox: 250 // sets only 250 X 250 region of viewfinder to
							// scannable, rest shaded.
						},
						qrCodeMessage => {
							this.scantext = qrCodeMessage
							// do something when code is read. For example:
							if (qrCodeMessage) {
								// uni.$showMsg(qrCodeMessage)
								// uni.$showMsg(qrCodeMessage, 999)
								// this.$refs.uToast.show({
								// 	title: `扫码成功`,
								// 	type: 'success'
								// });
								this.$emit('change', qrCodeMessage)
								this.stop();
							}
						},
						errorMessage => {
							// uni.$showMsg('errorMessage' + errorMessage)
							// parse error, ideally ignore it. For example:
							// console.log(`QR Code no longer in front of camera.`);
						}
					)
					.catch(err => {
						// Start failed, handle it. For example,
						console.log(`Unable to start scanning, error: ${err}`);
						// this.$refs.uToast.show({
						// 	title: `扫码失败：${err}`,
						// 	type: 'error'
						// });

						uni.$showMsg(err)
					});
			},
		}
	}
</script>

<style lang="scss">
	.scan {
		width: 56rpx;
		height: 56rpx;
		border-radius: 16rpx;
		background: rgba(255, 255, 255, 0.04);

		.img {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.sectionview {
		position: fixed;
		top: 0;
		left: 0rpx;
		width: 100%;
		height: 100vh;
		background-color: green;
		background: rgba(0, 0, 0, 0.4);
		z-index: 99;
	}

	.qr-reader {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0rpx;
	}
</style>
